class Observer {
    constructor(data) {
        this.observer(data);
    }

    // 把原来的属性改成set和get的形式
    observer(data) {
    //    data不能为空，并且是对象
        if (!data || typeof data !== 'object' ) return null;
    //    劫持数据，先获取到data的key和value；
        Object.keys(data).forEach((key) => {
            // 定义响应式
            this.defineReactive(data,key, data[key])
            this.observer(data[key]);
        })
    }

    defineReactive(obj, key, val) {
        let _this = this;
        let dep = new Dep();
        Object.defineProperty(obj, key, {
            enumerable: true,
            configurable: true,
            get() {
                Dep.target && dep.addSub(Dep.target);
                return val
            },
            set(newValue) {
                // 设置的值是对象的时候
                 if (newValue !== val) {
                    _this.observer(newValue); // 如果是Object，也要劫持
                    val = newValue;
                    dep.notify(); // 通知数据更新
                }
            }
        })
    }
}

class Dep {
    constructor() {
        // 订阅的数组
        this.subs = []
    }

    /**
     * 增加订阅
     * @param watcher
     */
    addSub(watcher) {
        this.subs.push(watcher)
    }

    /**
     * 通知
     */
    notify() {
        this.subs.forEach((watcher) => {
            watcher.update()
        })
    }
}